<template>
	<view v-if="showList && showList.length>0" class="shortctCont">
		<view class="flex flex_between topTab">
			<view class="left" :class="tabList.length ===1?'duan':''">
				<u-tabs :list="tabList" lineHeight="6rpx" :scrollable="false"
					:activeStyle="{fontWeight: 'bolder',fontSize: '34rpx',color: '#222222'}"
					:inactiveStyle="{fontSize: '30rpx'}" @click="tabclick" :current="active"></u-tabs>
			</view>
			<view class="right flex" @click="moreBtn">
				<text style="margin-right: 5rpx;">查看更多</text>
				<u-icon name="arrow-right" color="#999999" size="20rpx"></u-icon>
			</view>
		</view>
		<scroll-view v-if="lxList && lxList.length > 0" scroll-x class="lxTab">
			<view v-for="(item, index) in lxList" :key="index" :class="lxIndex === index?'on':''" @click="lxBtn(index)">
				{{item.projectName}}
			</view>
		</scroll-view>
		<view v-for="(item, index) in list" :key="index" class="box flex" @click="jumpDetail(item)">
			<view v-if="contentType == 1" class="left">
				<view>{{item.weekDay}}</view>
				<view>{{item.date.slice(5, 10)}}</view>
			</view>
			<image v-if="contentType != 1" :src="item.icon" class="left img"></image>
			<view class="right">
				<view class="bt">{{item.title}}</view>
				<view class="sm">
					<block v-if="contentType == 1 || tabList[active].style == '2'">
						<block v-if="item.price && Number(item.price) >0">
							<text class="redColor">¥{{item.price}}</text>起
						</block>
						<block v-else><text class="f28 green mr1">免费</text><text class="f26">有免费时长</text></block>
					</block>
					<block v-else>
						{{item.num || 0}}个{{tabList[active].style =='1'?'场地':'项目'}}
					</block>
				</view>
				<view class="btn">{{tabList[active].style =='1'?'订场':'订票'}}</view>
			</view>
		</view>
		<view v-if="list.length === 0" class="no-order" style="min-height: 30vh;">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showList: {
				type: Array,
				default: ()=>['1','2']
			},
			contentType: {
				type: String,
				default: '1'
			},
		},
		data() {
			return {
				tabList: [{
					name: "订场",
					style: '1',
					triggered: false,
				}, {
					name: "购票",
					style: '2',
					triggered: false,
				}],
				lxList: [],
				active: 0,
				lxIndex: 0,
				list: [],
				page: 1, //页码
				end: false, //控制是否还能切换下一页
			}
		},
		created() {
			if (this.showList.length < 2) {
				if (this.showList.indexOf('1') > -1) {
					this.tabList = [{
						name: "订场",
						style: '1',
						triggered: false
					}]
					this.getProject()
				} else if (this.showList.indexOf('2') > -1) {
					this.tabList = [{
						name: "购票",
						style: '2',
						triggered: false
					}]
					this.getProject()
				} else {
					this.tabList = []
				}
			} else {
				this.tabList = [{
					name: "订场",
					style: '1',
					triggered: false
				}, {
					name: "购票",
					style: '2',
					triggered: false
				}]
				this.getProject()
			}
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			tabclick(e) {
				this.active = e.index;
				this.lxIndex = 0;
				this.getProject()
			},
			jumpDetail(e) {
				let arr = this.lxList
				let obj = {}
				arr.forEach(s=> {
					if(s.id == e.projectId) {
						obj = s
					}
				})
				let date = ''
				if(this.contentType == 1) {
					date = e.date
				}
				if(this.tabList[this.active].style == '2') {
					this.jump2('/pages/ticket/index?id=', e.projectId +'&date='+date) 
				} else {
					this.jump2('/pages/venue/fieldArea?id=',obj.id+'&name='+obj.projectName+'&peerNum='+obj.peerNum+'&type=1'+'&date='+date)
				}
			},
			moreBtn() {
				if(this.tabList[this.active].style == '2') {
					this.jump2('/pages/ticket/index')
				} else {
					this.jump2('/pages/venue/siteReservation')
				}
			},
			getProject() {
				let type = '0'
				if(this.tabList[this.active].style == '2') {
					type = '1'
				}
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venueId,
							status: '1',
							type 
						}
					},
					api: this.$api.getProject()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if(this.contentType == '2') {
							this.lxList = [{
								projectName: '全部',
								id: ''
							}, ...res.recordList]
						} else {
							this.lxList = res.recordList
						}
						this.list = []
						this.getList()
					}
				}).catch(() => {})
			},
			lxBtn(index) {
				this.lxIndex = index
				this.getList()
			},
			getList() {
				let style = this.tabList[this.active].style
				let contentType = this.contentType
				let projectId = this.lxList[this.lxIndex].id || ''
				this.$app.ajax({
					api: this.$api.getAppHomeSiteList(),
					data: {
						pagination: {
							page: 1,
							rows: 10
						},
						param: {
							style,
							numType: '2',
							contentType,
							projectId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = res.recordList || []
					}
				}).catch(() => {})
			},

		}
	}
</script>
<style lang="scss" scoped>
	.shortctCont {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin-bottom: 52rpx;
		width: 690rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.topTab {
		box-sizing: border-box;
		position: relative;
		// border-bottom: 1rpx solid #E5E5E5;
		width: 650rpx;
		margin-left: -20rpx;
		&::after {
			content: '';
			position: absolute;
			left: 10rpx;
			right: 0rpx;
			bottom: 6rpx;
			z-index: 0;
			height: 1px;
			background-color: #E5E5E5;
		}

		.left {
			width: 230rpx;
			z-index: 2;
			&.duan {
				width: 120rpx;
			}
		}

		.right {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.lxTab {
		white-space: nowrap;
		display: flex;
		padding: 30rpx 0;

		view {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			display: inline-block;
			color: #333333;
			padding: 0 20rpx;
			line-height: 52rpx;
			border-radius: 30rpx;
			border: 1px solid #E5E5E5;
			margin-right: 20rpx;

			&:last-of-type {
				margin-right: 0;
			}

			&.on {
				border-color: $color;
				background-color: $color;
				color: #fff;
			}
		}
	}

	.box {
		margin-bottom: 30rpx;

		&:last-of-type {
			margin-bottom: 0;
		}

		.left {
			width: 88rpx;
			height: 88rpx;
			flex: none;
			background-color: $color2;
			margin-right: 24rpx;
			display: flex;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			line-height: 1.5;
			font-size: 26rpx;
			&.img {
				background: none;
				border-radius: 50%;
			}
		}

		.right {
			position: relative;
			height: 88rpx;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;

			.bt {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
			}

			.sm {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				text {
					display: inline-block;
				}

				.redColor {
					font-size: 30rpx;
					margin-right: 5rpx;
				}
			}

			.btn {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				display: inline-block;
				color: $color;
				line-height: 52rpx;
				border-radius: 30rpx;
				width: 112rpx;
				border: 1px solid $color;
				text-align: center;
				position: absolute;
				right: 0;
				top: 52%;
				margin-top: -26rpx;
			}
		}
	}
</style>